import { useNavigation } from "expo-router";
import React, { useState, useLayoutEffect, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
  Image,
  TouchableOpacity,
} from "react-native";
import {
  InputItem,
  Button,
  WingBlank,
  WhiteSpace,
  Toast,
} from "@ant-design/react-native";
import { router } from "expo-router";
import { AntDesign } from "@expo/vector-icons";
import { BlurView } from "expo-blur";
import { register } from "@/api/adminApi";

export default function RegisterPage() {
  const navigation = useNavigation();

  // 关键代码：在布局阶段修改导航选项
  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false, // 隐藏导航头
      gestureEnabled: false, // 可选：禁用侧滑返回
    });
  }, [navigation]);

  const [username, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [phone, setPhone] = useState("");
  const [nickName, setNickName] = useState("");
  const [loading, setLoading] = useState(false);

  // 提交登录
  const handleSubmit = () => {
    if (!username) {
      return Toast.info("请输入账号");
    }
    if (!password) {
      return Toast.info("请输入密码");
    }
    if (!newPassword) {
      return Toast.info("请输入二次确认密码");
    }
    if (password !== newPassword) {
      return Toast.info("两次密码输入不一致");
    }
    if (!phone) {
      return Toast.info("请输入手机号码");
    }
  
    setLoading(true);
    try {
      register({
        username,
        password,
        phone,
        nickName,
        status: "0",
      })
        .then((res) => {
          Toast.success("注册成功");
          // 这里添加实际登录逻辑
          router.push("/login");
        })
        .catch(() => {});
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      {/* 背景层：纯色 + 动态波纹效果 */}
      <View style={[styles.background, styles.animatedBg]} />

      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={styles.content}
      >
        {/* 毛玻璃容器 */}
        <BlurView intensity={25} tint="light" style={styles.blurContainer}>
          <View style={styles.logoBox}>
            <AntDesign name="aliwangwang" size={48} color="#1890ff" />
          </View>

          <WingBlank size="lg">
            <View style={styles.formBox}>
              <View style={[{ marginVertical: 8 }]}>
                <InputItem
                  type="text"
                  value={username}
                  onChange={setUserName}
                  placeholder="请输入账号"
                  style={styles.input}
                  labelNumber={3}
                  extra={<AntDesign name="mobile1" size={18} color="#1890ff" />}
                />
              </View>

              <View style={[{ marginVertical: 8 }]}>
                <InputItem
                  type="password"
                  value={password}
                  onChange={setPassword}
                  placeholder="请输入密码"
                  style={styles.input}
                  labelNumber={3}
                  extra={<AntDesign name="lock" size={18} color="#1890ff" />}
                />
              </View>

              <View style={[{ marginVertical: 8 }]}>
                <InputItem
                  type="password"
                  value={newPassword}
                  onChange={setNewPassword}
                  placeholder="请确认密码"
                  style={styles.input}
                  labelNumber={3}
                  extra={<AntDesign name="lock" size={18} color="#1890ff" />}
                />
              </View>

              <View style={[{ marginVertical: 8 }]}>
                <InputItem
                  type="phone"
                  value={phone}
                  onChange={(value) => {
                    const formatted = value
                      .replace(/\D/g, "")
                      .replace(/(\d{3})(\d{0,4})(\d{0,4})/, "$1 $2 $3")
                      .trim();
                    setPhone(formatted);
                  }}
                  placeholder="请输入手机号"
                  style={styles.input}
                  labelNumber={3}
                  extra={<AntDesign name="phone" size={18} color="#1890ff" />}
                />
              </View>

              <View style={[{ marginVertical: 8 }]}>
                <InputItem
                  type="text"
                  value={nickName}
                  onChange={setNickName}
                  placeholder="请输入昵称"
                  style={styles.input}
                  labelNumber={3}
                  extra={<AntDesign name="user" size={18} color="#1890ff" />}
                />
              </View>

              <WhiteSpace size="xl" />

              <Button
                type="primary"
                style={styles.button}
                loading={loading}
                onPress={handleSubmit}
                activeStyle={styles.activeButton}
              >
                立即提交
              </Button>

              <View style={styles.links}>
                <Text
                  style={styles.linkText}
                  onPress={() => router.push("/login")}
                >
                  立即登录
                </Text>
                <Text
                  style={styles.linkText}
                  onPress={() => {
                    Toast.info("请联系管理员");
                  }}
                >
                  忘记密码？
                </Text>
              </View>
            </View>
          </WingBlank>
        </BlurView>
      </KeyboardAvoidingView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: "relative",
    backgroundColor: "#f0f9ff", // 浅蓝色背景
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "#1890ff",
    opacity: 0.1,
  },
  animatedBg: {
    animationKeyframes: {
      "0%": { transform: [{ scale: 1 }], opacity: 0.1 },
      "50%": { transform: [{ scale: 1.2 }], opacity: 0.05 },
      "100%": { transform: [{ scale: 1 }], opacity: 0.1 },
    },
    animationDuration: "5000ms",
    animationIterationCount: "infinite",
  },
  content: {
    flex: 1,
    justifyContent: "center",
  },
  blurContainer: {
    flex: 1,
    justifyContent: "center",
    padding: 20,
  },
  logoBox: {
    alignItems: "center",
    marginBottom: 40,
  },
  formBox: {
    backgroundColor: "rgba(255,255,255,0.95)",
    borderRadius: 16,
    padding: 24,
    shadowColor: "#1890ff",
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.1,
    shadowRadius: 16,
  },
  input: {
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#e6f7ff",
    backgroundColor: "#fff",
    paddingHorizontal: 12,
    marginVertical: 8,
  },
  button: {
    borderRadius: 24,
    height: 48,
    borderWidth: 0,
    backgroundColor: "#1890ff",
    shadowColor: "#1890ff",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
  },
  activeButton: {
    backgroundColor: "#096dd9",
  },
  links: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20,
  },
  linkText: {
    color: "#1890ff",
    fontSize: 14,
    textDecorationLine: "underline",
  },
});
